<template>
  <v-card class="Members-Container" width="344" min-height="192">
    <v-toolbar class="header" flat height="40" color="#79839B">
      <v-toolbar-title class="white-text">Members</v-toolbar-title>
    </v-toolbar>
    <v-spacer class="content text-left px-1">
      <v-col class="py-2">
        <v-row class="justify-space-between" no-gutters>
          <v-col class="content-title">Member</v-col>
          <v-col class="text-right">last Seen At</v-col>
        </v-row>
      </v-col>
      <v-col class="py-1">
        <v-row class="justify-space-between" no-gutters>
          <v-col>
            <v-avatar color="primary" size="32" class="mr-2">
              <img
                src="https://cdn.vuetifyjs.com/images/john.jpg"
                alt="Amy Chan"
              />
            </v-avatar>
            <span>Amy Chan</span>
          </v-col>
          <v-col class="text-right">
            <span class="date">today</span> 15:50
          </v-col>
        </v-row>
      </v-col>
      <v-col class="py-1">
        <v-row class="justify-space-between" no-gutters>
          <v-col>
            <v-avatar color="#B4C78C" size="32" class="mr-2">
              <span class="white-text">NC</span>
            </v-avatar>
            <span> Nicole Chan </span>
          </v-col>
          <v-col class="text-right">
            <span class="date">today</span> 13:50
          </v-col>
        </v-row>
      </v-col>
    </v-spacer>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Members extends Vue {}
</script>
<style lang="scss">
@import "./Members.scss";
</style>
